<template>
	<div>
		{{ msg }} <br />
		我是emit子组件
		<!--  -->
		<button @click="emitBtn">测试emit</button>
		<!-- template中可以直接使用 $emit, setup中使用defineEmits定义emit后使用 -->
		<button @click="$emit('onMyChange', '我是emit子组件触发的onMyChange事件')">测试emit</button>
	</div>
</template>

<script setup lang="ts">
// 方式一： defineProps(['msg']);
// 方式二： defineProps({ msg: String });
// 方式三:  defineProps({ msg: { type: String, default: '0' } });
// 方式四：setup + ts 专有写法  defineProps<{ msg: string }>();
// 方式五：setup + ts 专有写法
withDefaults(defineProps<{ msg: string }>(), {
	msg: '默认msg',
})

// 方式一：
// defineEmits(['onMyChange']);
// 方式二：
// defineEmits<{ (onMyChange: string, payload: string): void; }>();
// 方式三：
// defineEmits({ onMyChange(payload: string) {} });
// 方式四：
// defineEmits<{ onMyChange: [payload: string] }>();
// 方式五
const emit = defineEmits<{
	(e: 'onMyChange', payload: string): void
}>()

const emitBtn = () => {
	emit('onMyChange', '我是emit子组件触发的onMyChange事件')
}
</script>
